<template>
	<view class="background">
		<view>
			<view class="ticket-warp">
				<radio-group @change="radioChange">
				    <view
						v-for="(ticket, ticketIndex) in ticketList"
						:key="ticketIndex"
						class="ticket-item">
						<image
							@click="removeTicket(ticket.id)" 
							src="../../static/icon_remove_red.png" />
				        <view class="ticket-info" @tap="editTicket(ticket.id)">
							<text style="font-weight: bold; font-size: 38rpx;">{{ticket.companyName}}</text>
							<text style="color: #949699; font-size: 30rpx;">{{ticket.email}}</text>
						</view>
						<view>
						    <radio color="#2697FF" :value="ticket.id" :checked="selectedTiacketId == ticket.id" />
						</view>
				    </view>
				</radio-group>
			</view>
			<view class="add-ticket">
				<view @tap="editTicket()" class="add-btn">
					<image src="../../static/icon_add_blue.png" />
					<text>添加开票信息</text>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			 <button
				@click="saveTsOrderInvoice"
				type="primary" 
				size="default" 
				style="background: #2697FF; width: 90%; margin-top: 15upx;">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import api from '../../api';
	export default {
		data() {
			return {
				ticketList: [],
				selectedTiacketId: '',
				orderId: '',
			}
		},
		
		onLoad(option) {
			this.orderId = option.orderId;
			this.getTicketList();
		},
		
		methods: {
			async getTicketList() {
				const { code, data } = await api.ticket.ticketList({page:1, pageSize:100});
				if (code === 200) {
					this.ticketList = data?.list || [];
				}
			},
			
			async saveTsOrderInvoice() {
				console.log(this.selectedTiacketId);
				if(!this.selectedTiacketId) {
					uni.showToast({
						title: '请选择发票',
						duration: 1500,
						icon: "error",
					});
					return
				}
				const {code, data} = await api.ticket.saveTsOrderInvoice({ orderId: this.orderId, passengerInvoiceId: this.selectedTiacketId});
				if(code === 200) {
					uni.showToast({
						title: '提交成功，请注意邮箱查收',
						duration: 1500,
						icon: 'none'
					});
					setTimeout(()=> {
						let pages = getCurrentPages(); //页面栈
						let prePage = pages[pages.length - 2]; //上一页
						prePage.$vm.getOrderList();
						uni.navigateBack();
					}, 1500)
				}
				else {
					uni.showToast({
						title: '提交失败',
						duration: 1500,
						icon: "error",
					});
				}
			},
			
			removeTicket(id) {
				console.log(id);
				uni.showModal({
					title: '提示',
					content: '确定删除?',
					success: async (res) => {
						if (res.confirm) {
							const {code} = await api.ticket.deteteTicket({ id: id })
							if (code === 200) {
								this.getTicketList();
							}
						}
					}
				});
			},
			
			editTicket(id) {
				console.log(id);
				if(id) {
					console.log(1);
					uni.navigateTo({
						url: `/pages/ticket/ticket-add?ticketId=${id}`
					});
				}
				else {
					console.log(2);
					uni.navigateTo({
						url: `/pages/ticket/ticket-add?ticketId`
					});
				}
			},
			
			radioChange(e) {
				this.selectedTiacketId = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	.background {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: #F7F7F7;
		.ticket-warp {
			background: #FFF;
			.ticket-item {
				display: flex;
				flex-direction: row;
				height: 110upx;
				padding-top: 20upx;
				padding-bottom: 20upx;
				margin-left: 20upx;
				margin-right: 20upx;
				align-items: center;
				background: #FFF;
				border-bottom: solid 1upx #EFEFEF;
				.ticket-info {
					display: flex;
					flex: 1;
					height: 100%;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 10upx;
				}
				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}
		.add-ticket {
			margin-top: 20upx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.add-btn {
				border-radius: 16upx;
				background: #FFF;
				width: 90%;
				height: 90upx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				image {
					width: 40upx;
					height: 40upx;
					margin-right: 10upx;
				}
				text {
					font-weight: bold;
				};
			}
		}
		.bottom-btn {
			height: 140upx;
			background: #FFFFFF;
		}
	}
</style>
